<template>
  <!-- 智能通风 -->
  <div class="ventilate">
    <layout-box :is-leave="isLeave">
      <!-- 页面左侧 -->
      <div slot="left" class="layout-box-con">
        <LeftIndexVue />
      </div>
      <!-- 页面右侧 -->
      <div slot="right" class="layout-box-con">
        <Right v-if="routeId === ''" />
        <Right2 v-if="routeId === '2_HFLJ'" />
        <Right3 v-else />
      </div>
    </layout-box>
  </div>
</template>

<script>
// 左右分栏布局
import LayoutBox from '@/components/LayoutBox.vue';
// 引入左右两栏模块
import LeftIndexVue from '../left/Index.vue';
import Right from '../right/Index.vue';
import Right2 from '../right2/Index.vue';
import Right3 from '../right3/Index.vue';
export default {

  name: 'Ventilate',

  components: {
    LayoutBox,
    LeftIndexVue,
    Right2,
    Right,
    Right3
  },
  data() {
    return {
      isLeave: false,
      time: null
    };
  },
  computed: {
    routeId() {
      return this.$route.params.id;
    }
  },
  mounted() {
  },
  // 页面的退场动画
  beforeRouteLeave(to, from, next) {
    this.isLeave = true;
    this.time = setTimeout(() => {
      next();
    }, 1000);
  },
  beforeDestroy() {
    clearTimeout(this.time);
    this.time = null;
  }
};
</script>

<style lang='scss' scoped>
.layout-box-con{
  display: flex;
  .layout-box-bar{
    margin-left:.625rem;
  }
}
</style>
